<template>
    <transition name="slide-up">
         <div class="setting-wrapper" v-show="menuVisible && settingVisible ===2" >
             <div class="setting-progress">
                 <div class="read-time-wrapper">
                     <span class="read-time-text">{{getReadTimeText()}}</span>
                     <span class="icon-forward"></span>
                 </div>
          <div class="progress-wrapper">
              <div class="progress-icon-wrapper" @click="prevSection()">
                  <span class="icon-back" ></span>
              </div>
            <input
              type="range"
              min="0"
              max="100"
              step="1"
              ref="progress"
              @change="onProgressChange($event.target.value)"
              @input="onProgressInput($event.target.value)"
              :disabled="!bookAvailable"
              :value="progress"
              class="progress"
            />
           <div class="progress-icon-wrapper">
                  <span class="icon-forward" @click="nextSection()"></span>
              </div>
          </div>
          <div class="text-wrapper">
            <span class="progres-section-text">{{this.getSectionName}}</span>
            <span>({{bookAvailable?progress +'%':'加载中'}})</span>
          </div>
             </div>
         </div>
    </transition>
</template>
<script>
import { ebookMixin } from './../../utils/mixin'
export default {
    mixins:[ebookMixin],
    data() {
        return {
            
        }
    },

    updated(){
        this.updateProgressBg()
    },
    methods:{
        onProgressChange(progress){
            this.setProgress(progress).then(() => {
                this.displayProgress()
                this.updateProgressBg()
            })
        },
        displayProgress(){
            // 获取定位数据，通过百分比
            const cfi = this.currentBook.locations.cfiFromPercentage(this.progress /100)
            this.display(cfi)
        },
        // 进度条背景变化
        updateProgressBg(){
            this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`
        },
        onProgressInput(progress){
             this.setProgress(progress).then(() => {
                this.updateProgressBg()
                 
             })
        },
        prevSection(){
          if(this.section >0 && this.bookAvailable){
              this.setSection(this.section -1).then(() => {
                 this.displaySection()
              })
          }
        },
        nextSection(){
            //spine 表示阅读进度 多少个章节
              if(this.section <this.currentBook.spine.length-1 && this.bookAvailable){
              this.setSection(this.section +1).then(() => {
                this.displaySection()
              })
          }
        },
        displaySection(){
                  const sectionInfo = this.currentBook.section(this.section)
                  if(sectionInfo && sectionInfo.href){
                   this.display(sectionInfo.href)
                  }
        },
    }
}
</script>
<style lang="scss" scoped>
@import "@styles/global.scss";
  .setting-wrapper {
    z-index: 151;
    position: absolute;
    bottom: px2rem(48);
    left: 0;
    width: 100%;
    height: px2rem(90);
    background: #fff;
    box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, 0.15);
    .setting-progress{
        position: relative;
        width: 100%;
        height: 100%;
        .read-time-wrapper{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;

            font-size: px2rem(12);
            @include center;
        }
      .progress-wrapper {
        width: 100%;
        height: 100%;
        @include center;
        padding: 0 px2rem(15);
        box-sizing: border-box;
        .progress-icon-wrapper{
            font-size: px2rem(20);
        }
        .progress {
          width: 100%;
          -webkit-appearance: none;
          height: px2rem(2);

            margin: 0 px2rem(10);
          &:focus {
            outline: none;
          }
          &::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: px2rem(20);
            width: px2rem(20);
            border-radius: 50%;
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
            border: px2rem(1) solid #ddd;
          }
        }
      }
      .text-wrapper {
        position: absolute;
        left: 0;
        bottom: px2rem(10);
        width: 100%;
        color: #333;
        font-size: px2rem(12);
        @include center;
        box-sizing: border-box;
        padding : 0 px2rem(15);
        .progres-section-text{
         @include ellipsis;
        }
      }
     }
    }
    
</style>
